<template lang="">
  <div class="navTop">
    <van-nav-bar :left-arrow="leftShow" @click-left="onClickLeft" @click-right="onClickRight">
      <template #right>
        <div v-if="rightName == '登录'">
          <div>登录 | 注册</div>
        </div>
        <div v-else-if="rightName == '切换'">
          <div>切换城市</div>
        </div>
        <div v-else-if="rightName == '头像'">
          <i class="iconfont icon-wode" @click="clickWode"></i>
        </div>
        <div v-else>
          <span>{{rightName}}</span>
        </div>
      </template>
      <template #left>
        <div v-if="leftName =='1'">
          <span>ele.me</span>
        </div>
        <div v-else-if="leftName == '搜索'">
          <van-icon name="search" @click="clickSearch" />
        </div>
        <div v-else-if="leftName == '空'">
          <van-icon name="arrow-left" style="color: white;" @click="clickGo" />
        </div>
      </template>

      <template #title>
        <div v-if="titleName == '标题' ">
          {{navTitle}}
        </div>
        <div v-else-if="titleName == '1' ">
          <span>密码登录</span>
        </div>
        <div v-else>
          <span>{{titleName}}</span>
        </div>

      </template>
    </van-nav-bar>
  </div>

</template>

<script>
  export default {
    name: "Nav",
    data() {
      return {
        name: "points",
        imgurl: "",
      }
    },
    props: ['navTitle', 'leftShow', 'leftName', 'titleName', 'rightName'],
    methods: {
      clickSearch() {
        this.$router.push({ name: 'About' })
      },
      clickGo() {
        this.$router.go(-1);
      },
      onClickLeft() {
        // this.$router.go(-1);
      },
      onClickRight(e) {
        if (e.target.innerHTML == "切换城市") {
          this.$router.push({ name: 'HomeFirst' });
        } else if (e.target.innerHTML == "登录 | 注册") {
          this.$router.push({ name: 'Login' });
        }
      },
      clickWode() {
        this.$router.push({ name: 'Mine' })
      }

    },
  }
</script>

<style lang="less">
  .navTop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    height: 44px;
    width: 100%;
  }

  #app .van-nav-bar {
    font-size: 18px;
    background-color: rgb(49, 144, 232);
    color: white;
    height: 44px;
  }

  .van-nav-bar .van-icon {
    font-size: 18px;
    color: white !important
  }

  .van-nav-bar__left {
    color: white;
  }

  .van-nav-bar .van-nav-bar__title {
    color: white;
    font-size: 18px;
    font-weight: 600;
  }
</style>